<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;"/>
	<title>Cirkana Map Viewer</title>
	<style>
		html,body {
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			font-family: sans-serif;
			font-size: xx-small;
		}
		
		.border {
			border: 1px solid black;
		}
		
	</style>
</head>
<body onload="javascript:showMap();">
	<!-- input type="text" id="log" style="width: 300px;"></input-->
	<div id="map" style="width: 103%; height: 100%; "></div>
	<script type="text/javascript">
		
		var map;
		function showMap() {
			var div = document.getElementById('map');
			var latlonIni = new google.maps.LatLng(41.38795, 2.176838);
			var options = {
	        zoom: 13,
	        center: latlonIni,
	        mapTypeId: google.maps.MapTypeId.ROADMAP
	      };
			map = new google.maps.Map(div, options);

			startWaitingMessage();
		}

		var interval;
		function startWaitingMessage() {
			interval = setInterval(waitMessage, 100);
		}
		function stopWaitingMessage() {
			clearInterval(interval);
		}

		/*
		function Comm() {
			this.hasMessage = function() { return "true"; };
			this.getMessageType = function() { return "changeLocation"; };
			this.getLat = function() { return "41.368373"; };
			this.getLon = function() { return "2.157336"; };
		}
		var comm = new Comm();
		*/

		var MESSAGE_NO_MESSAGE = "noMessage";
		var MESSAGE_CHANGE_LOCATION = "changeLocation";
		var MESSAGE_SET_WAYPOINT = "setWaypoint";
		var MESSAGE_START_TRACK = "startTrack";
		var MESSAGE_SET_TRACKPOINT = "setTrackpoint";
		var MESSAGE_FINISH_TRACK = "finishTrack";

		function waitMessage() {
			var type = comm.nextMessage();
			if (type != MESSAGE_NO_MESSAGE) {
				stopWaitingMessage();

				if (type == MESSAGE_CHANGE_LOCATION) {
					var lat = parseFloat(comm.getLat());
					var lon = parseFloat(comm.getLon());
					changeLocation(lat, lon);
					
				} else if (type == MESSAGE_SET_WAYPOINT) {
					var lat = parseFloat(comm.getLat());
					var lon = parseFloat(comm.getLon());
					var contents = comm.getWayPointContents();
					setWayPoint(lat, lon, contents);

				} else if (type == MESSAGE_START_TRACK) {
					startTrack();
					while (comm.nextMessage() != MESSAGE_FINISH_TRACK) {
						var lat = parseFloat(comm.getLat());
						var lon = parseFloat(comm.getLon());
						setTrackPoint(lat, lon);
					}
					finishTrack();

				}

				startWaitingMessage();
			}
		}

		function changeLocation(lat, lon) {
			var latlng = new google.maps.LatLng(lat, lon);
			map.setCenter(latlng);
			setCurrentLocation(latlng);
		}

		var currentLocationMarker;
		function setCurrentLocation(latlng) {
			if (!currentLocationMarker) {
				var icon = new google.maps.MarkerImage("traveller.png");
				var options = {
						map: map,
						position: latlng,
						icon: icon
				}
				currentLocationMarker = new google.maps.Marker(options);
			} else {
				currentLocationMarker.setPosition(latlng);
			}
		}

		var waypoints = new Array();
		function setWayPoint(lat, lon, contents) {
			var latlng = new google.maps.LatLng(lat, lon);

			var markerOptions = {
					map: map,
					position: latlng
			}
			var marker = new google.maps.Marker(markerOptions);
			
			var div = document.createElement('div');
			div.innerHTML = contents;
			var options = {
					content: div
			}
			var waypoint = new google.maps.InfoWindow(options);
			google.maps.event.addListener(marker, 'click', function() {
				closeWayPoints();
				waypoint.open(map, marker);
			});
			waypoints[waypoints.length] = waypoint;
		}

		function closeWayPoints() {
			for (var iii = 0; iii < waypoints.length; iii++)
				waypoints[iii].close();
		}

		var trackLatlons;
		function startTrack() {
			trackLatlons = new Array();
		}
		
		function setTrackPoint(lat, lon) {
			var latlon = new google.maps.LatLng(lat, lon);
			trackLatlons[trackLatlons.length] = latlon;
		}
		
		function finishTrack() {
			addPolyline(trackLatlons);
		}
		
		var polyline;
		function addPolyline(latlons) {
			var options = {
					map: map,
					path: latlons,
					strokeColor: "#0000FF",
					strokeWeight: 3
			}
			polyline = new google.maps.Polyline(options);
		}

		function playVideo(url) {
			comm.playMedia('video', url);
		}

		function playGame() {
			comm.playGame('memory');
		}

	</script>
</body>
</html>